import { useIntersectionObserver } from '@vueuse/core'

export const customDirective = {
	install(app) {
		app.directive('img-lazy', {
			mounted(el, binding) {
				// el：指令绑定到的元素。这可以用于直接操作 DOM
				// binding：一个对象
				const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
					// isIntersecting ：是否进入视口
					if (isIntersecting) {
						el.src = binding.value
            // 停止监听
						stop()
					}
				})
			},
		})
	},
}
